<!--增删改查通用列表组件-->
<template>
  <curd-filter
      v-if="config.filter"
      :config="config.filter"
      @on-query="onQuery"
  ></curd-filter>
  <curd-table
      v-if="config.table"
      :config="config.table"
      :table-list="tableList"
      @cg-page="cgPage"
  ></curd-table>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, reactive} from "vue";
import CurdFilter from "@/components/CurdFilter.vue";
import CurdTable from "@/components/CurdTable.vue";

export default defineComponent({
  components: {
    "curd-filter": CurdFilter,
    "curd-table": CurdTable,
  },
  props: ["config"],
  setup({config}) {
    let formDataCache = {}
    const tableList = reactive({
      list: [],
      cuurent: 1,
      size: 10,
      total: 0,
    });


    const getData = async (param) => {
      console.log(param)
      let data = await config.table.http(param);
      tableList.list = data.records;
      tableList.cuurent = data.current;
      tableList.size = data.size;
      tableList.total = data.total;
    };
    onMounted(async () => {
      getData({cuurent: tableList.cuurent, size: tableList.size});
    });

    const onQuery = (formData) => {
      let formDataCache = formData
      getData({cuurent: tableList.cuurent, size: tableList.size, ...formData})
    };

    const cgPage = (page) => {
      getData({cuurent: page, size: tableList.size, ...formDataCache})
    };
    return {
      onQuery,
      tableList,
      getData,
      cgPage,

    };
  },
});
</script>
